import React, { Component } from 'react'
import { SubmitApi } from '@/request/api'
import { alertMapDispatchToProps, showHideAlert } from '@/utils'
import {connect} from 'react-redux'

class Panduan extends Component {
  state = {
    // 当前选中项
    option: '',
    isShowAnswer: false
  }
  render() {
    let timu = this.props.timu
    // console.log('panduantimu',timu);
    let xuanxiang = JSON.parse(timu.optionContent || '[]')
    // console.log('xuanxiang',xuanxiang);
    return <div className='panduan' style={{display: timu.questionType === 'check' ? 'block' : 'none'}}>
      <div className="top_title">
        <span>判断</span>
        <p>{ timu.title}</p>
      </div>
      <ul className="danxuan_options">
        {xuanxiang.map((item, index) => (
          <li key={index} onClick={() => this.setState({ option: item.key })}>
            <i className={this.state.option === item.key ? "iconfont icon-danxuanxiangxuanzhong" :"iconfont icon-danxuanxiangweixuanzhong" }></i>
            <span style={{lineHeight: '25px'}}>{item.key}.{ item.value}</span>
          </li>
        ))}
      </ul>
      <p className='subject_tips'>此类型题目暂不支持打分，按正确记分</p>
      <div className="subject_submit" onClick={this.submitFn.bind(this, timu.id,timu.categoryCode)}>确认</div>
      <section style={{display: this.state.isShowAnswer ? 'block' : 'none'}}>
        <div className="subject_answer">
        <span>答案:</span>
        <p>{ timu.answer}</p>
      </div>
      <div className="subject_answer subject_analyze">
        <span style={{display: timu.questionType === 'qa' ? 'none' : 'flex' }}>解析:</span>
        <p>{ timu.analysis}</p>
      </div>
      </section>
    </div>;
  }
  submitFn(id,categoryCode) {
    SubmitApi({
      categoryCode,
      actionType: 'exam_test',
      userAnswer: this.state.option,
      actionCode: this.props.actionCode,
      id
    }).then(res => {
      // console.log(res);
      if (res.errCode === 0) {
        // 提示提交成功
        showHideAlert(this.props, {
          icon: 'success',
          title: '提交成功'
        })
        // 显示答案
        this.setState({isShowAnswer: true})
      }
    })
  }
}

export default connect(null,alertMapDispatchToProps)(Panduan)
